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Printed Page and Reflected Light Monitor and Internal Light Source 


We External Light Source 


Opaque Page 


A printed page is viewed in reflected light. Any design on a computer monitor is seen with an internal light 
source. 
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Introduction 


The aim of this short course is to introduce students to some of the basic concepts in using typefaces for Web 
based designs. The language and structure of this course has been kept lucid and simple, keeping in mind under- 
graduate students of art and design. 


We must begin by understanding how Web based designs are different than traditional print based designs. The 
first and most basic difference regarding these is the certainty of output. 


In traditional print based designs, since the final output is a physical copy produced by a printer, there is a great 
deal of certainty about how the final design would look, and how it will be consumed. In contrast to this, one 
cannot say with certainty how your website will be viewed. Once it is designed it is uploaded on to a web server, 
from which it can be viewed on a desktop computer, which has a large and wide LCD monitor or on a small laptop 
which has a small LCD screen, or even on a mobile phone which has an ever smaller screen. From a system point 
of view, the design created by you would be processed by several different operating systems. Typographically 
these systems might not contain the fonts that you have used for your designs—this brings about a certain 
amount of uncertainty in the final rendering of your designs. 


The aim of this short course is to introduce students to some of the basic concepts in using typefaces for Web 
based designs. The language and structure of this course has been kept lucid and simple, keeping in mind under- 
graduate students of art and design. 


We must begin by understanding how Web based designs are different than traditional print based designs. The 
first and most basic difference regarding these is the certainty of output. 


In traditional print based designs, since the final output is a physical copy produced by a printer, there is a great 
deal of certainty about how the final design would look, and how it will be consumed. In contrast to this, one 
cannot say with certainty how your website will be viewed. Once it is designed it is uploaded on to a web server, 
from which it can be viewed on a desktop computer, which has a large and wide LCD monitor or on a small laptop 
which has a small LCD screen, or even on a mobile phone which has an ever smaller screen. From a system point 
of view, the design created by you would be processed by several different operating systems. Typographically 
these systems might not contain the fonts that you have used for your designs—this brings about a certain 
amount of uncertainty in the final rendering of your designs. 
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Figure 3: The uncertainty rises from the fact that any given website can be seen on different devices. 
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Assignment 1: 

¢ In the given assignment, please try and answer the following questions. 

¢ Use the available books in your library, online sources or talk to experienced graphic/ type designers. 

+ After noting down the answers, please discuss your answers with your colleagues and faculty members. 


There is a possibility that you might not reach a single unambiguous answer. The goal of the assignment is to 
stimulate a discussion rather than to come up with a definite answer. Some of the questions are purposefully 
challenging, complex and ambiguous in nature; they are meant for the more experienced students and faculty, 
but undergraduates should nonetheless attempt to answer them. 


Q1. List down various mediums that are incorporated in traditional print based publications. 
Describe their properties—such as size, number of colours, fonts, layouts etc. 


Q2. List down various mediums that web based designs need to be prepared for. 
Describe their properties—such as size, number of colours, fonts, layouts etc. 
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> .. . known. Along with this there are certain basic differences in the approaches to designing for print and for the 

Prof. Girish Dalvi web. One of the first differences that we come across is that of light sources. 
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Design elements on a printed page, be it text or graphics are seen in reflected light. Their visibility is dependent 
on an external source of light. The rays of light are emitted from an external light source such as the sun; they 
then are reflected back opaque page and are then seen by the viewer. (See figure 1) 
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Opaque Page 


Figure 1: A printed page is viewed in reflected light. 
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Web (software) based designs use a completely different principle to display text and graphics. When a design is 
seen on a computer monitor or a mobile device, the graphic elements in the design are illuminated by an internal 
light source which is present in the device itself. Graphical elements on a monitor are illuminated and displayed 
directly. 


Internal Light Source 


Transparent Screen 


Figure 1: Any text on a monitor is read with an internal light source. 


This difference in the light sources has many consequences on how graphical elements and text are perceived 
by the viewer. So a graphic designer must be aware of how a design would look on screen and how it would look 
on paper. Designers must be aware of the advantages and disadvantages of each of the mediums, and be careful 
while translating their designs from paper to screen and vice versa. 
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For Example: 

Colour is perceived differently on paper and on screen due to the differences in light sources. Most colours usual- 
ly look brighter on the screen; this can be an advantage as more vibrant colours can then be used on screen. But 
designers must be careful while using light colours, especially in setting text. Light colours on screen have lower 
contrast. So a line of yellow coloured text on a white background might be very difficult to read on screen. Along 
the same lines colours such as gold, silver, as well as a range of fluorescent colours are available exclusively for 
print and cannot be created on screen. 


Assignment 2: 

In the given assignment, please try and answer the following questions. 

* Use the available books in your library, online sources or talk to experienced graphic/ type designers. 
After noting down the answers, please discuss your answers with your colleagues and faculty members. 


There is a possibility that you might not reach a single unambiguous answer. The goal of the assignment is to 
stimulate a discussion rather than to come up with a definite answer. Some of the questions are purposefully 
challenging, complex and ambiguous in nature; they are meant for the more experienced students and faculty, 
but undergraduates should nonetheless attempt to answer them. 


Q3. Describe in your own words how the source of light affects the text that is read. Determine what effect does 
light have on the basic elements of design, such as colour, typography, layout etc. 


Q4. Read up and search “e-ink technologies” and e-book readers. Discover the source of light that they use, and 
hence determine its advantages and disadvantages. 


Q5. Compare print based design with screen based designs and e-ink technology. Highlight their pros and cons. 
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Prof. Girish Dalvi display. A Pixel is the smallest screen element in a display. While representing raster images it is the smallest unit 
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Raster images (such as photographs) are made up of millions of pixels, each having a specific colour and location. 
An important parameter that defines the pixel is its aspect ratio, which is the ratio of the width of the pixel to its 
height. It is important to note here that a pixel is not always a square (ratio 1:1); there are many rectangular pixels 


which have different ratios, such as 4:3 and 16:9. 
Source: 
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Furthermore, it is also possible that pixels are not rectangular in nature. They can be circular and even capsule 
screen-types 


shaped. On a computer each pixel is a rectangle, but when displayed on a device they can be displayed through a 
series of circles, rectangles or capsules. 


Figure 1: Pixels on a TV set, on a CRT Computer Monitor and LCD Monitor. 
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The above figure shows the different shapes of pixels that are seen in some common display devices. 
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Figure 2: Pixels on a Cathode Ray Tube Computer Monitor and the text displayed in it. 
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text is called aliased text (or edge). Smoothening these artifacts or removing aliasing from a text to make it look 


When text is fitted on to a grid of pixels, it might appear jagged. The jagged edges are called artifacts or the 
smoother and to make it blend properly with its background is called anti-aliasing. 


Figure 3: Pixels on a LCD Computer Monitor and the text displayed in it. 
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In the figure given below, the letter on the left has jagged edges in comparison with the letter on the right which 


is anti-aliased. 


D DAD 


AD D 


Figure 4: Aliased letter (on the left) and anti-aliased letter (on the right). 


Assignment 3: 

+ In the given assignment, please try and answer the following questions. 

+ Use the available books in your library, online sources or talk to experienced graphic/ type designers. 

« After noting down the answers, please discuss your answers with your colleagues and faculty members. 


There is a possibility that you might not reach a single unambiguous answer. The goal of the assignment is to 
stimulate a discussion rather than to come up with a definite answer. Some of the questions are purposefully 
challenging, complex and ambiguous in nature; they are meant for the more experienced students and faculty, 
but undergraduates should nonetheless attempt to answer them. 
Q6. List down the various aspect ratios of pixels used today? 

What are the different resolutions that are used in today’s devices? 


Q7. What are the different shapes of pixels? 
Why do different devices, have pixels of different shapes and sizes? 


Q8. What are the methods used for smoothening fonts? 
Find out and explain, “SubpixelRendering Optimization” technology. 


J 
D’source 12 
Digital Learning Environment for Design - www.dsource.in 


Design Course Fonts for the Screen 
Digital Typography - 2 


. . The square grid of the screen presents a new kind of challenge to font designers. Type designers have had to de- 
Understanding Type as Bits : : : : : : : : : 
b sign letters which fit into the pixel grid presented by various electronic devices. Screen fonts are fonts which are 
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some low end devices such as mobiles, bitmap fonts are used instead of vector fonts. 
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Common examples given for fonts that are designed for the screen are: 
¢ Verdana and 
° Georgia 


2 cseeneratnarmams We rdana is a sans 
a serif font designed 
oS for the screen. 


4. Fonts for the Screen 
5. Presentation - Slide Show 
6. References 


7 Contact Detals Gill Sans is a sans serif 
font which is used in 
print publications. 


Figure 2: Gill Sans is a font which was designed by Eric Gill before the use of DTP computers. 


Figure 1: Verdana is a sans serif font designed by Matthew Carter. 
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Figure 4: Compare x-heights of the fonts, both the fonts are at the same point size. 
Source: 
http://www.dsource.in/course/digital-typography-2/ In the above figures we have shown fonts which are largely used for print and fonts which are specially designed 
fonts-screen for the screen. Compare the visual features of these two typefaces, and try and deduce what design features dif- 


ferentiate the two kinds of fonts. As a hint we could begin by comparing the horizontal and vertical proportions 
(such as x-heights) of the two kinds of fonts. 
1. Introduction 


se ion Ill Tt Ulli 

as li Illusion iterate 
4. Fonts for the Screen 

5. Presentation - Slide Show 


a 7 
Sane Illusion Ill 1 Illiterate 
7. Contact Details 
Figure 5: Note differences in characters such as lowercase | and upper case | and the numeral 1. 


If we study Verdana, we realize that its legibility at small point sizes can be attributed to many factors. Its basic 

shape is derived from a square grid. Along with this it is more loosely spaced which helps legibility at small sizes. 
The bold version of the font is also darker than print based fonts. Letters such as j I |, | and 1 have been designed 
so that they can be easily differentiated. 


Besides the visual features, screen fonts are hinted. Font hinting is the process in type design where set of in- 
structions are embedded in a font so that the computer can adjust the drawing outlines on a small raster grid. 
Hinting is especially used to make fonts more legible on low screen resolutions. One important factor for the 
clear legibility of screen fonts is the quality of hinting that they have. 
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Assignment 4: 

In the given assignment, please try and answer the following questions. 

* Use the available books in your library, online sources or talk to experienced graphic/ type designers. 

+ After noting down the answers, please discuss your answers with your colleagues and faculty members. 


There is a possibility that you might not reach a single unambiguous answer. The goal of the assignment is to 
stimulate a discussion rather than to come up with a definite answer. Some of the questions are purposefully 
challenging, complex and ambiguous in nature; they are meant for the more experienced students and faculty, 
but undergraduates should nonetheless attempt to answer them. 


Q9. List out the visual design features in screen fonts such as Verdana and Georgia that make them more legible 
on the screen as compared to print fonts. 


Q10. Verdana and Georgia were fonts designed for the screen in the 90’s. Find out and list down fonts designed 
for the screen in recent years. 


Q11. Explain the phenomena of hinting. What is its purpose? How is hinting actually done? 
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Presentation - Slide Show 


Digital Typography - 2: Understanding Type as Bits 


Uncertainty in the output of web based designs 


Web Publishing 


J 
D’source 
Digital Learning Environment for Design - www.dsource.in 4 


Design Course 

Digital Typography - 2 
oe Type as Bits Website seen on different devices 
Prof. Girish Dalvi 
IDC, IIT Bombay 


Source: 
http://www.dsource.in/course/digital-typography-2/ 
presentation-slide-show 


1. Introduction 
2. Light Sources 


3. Screen Types 
4. Fonts for the Screen 
5. Presentation - Slide Show w 


6. References 
7. Contact Details 


The uncertainty rises from the fact that any given website can be 
seen on different devices 
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Printed Page and Reflected Light 


we External Light Source 


Opaque Page 


A printed page is viewed in reflected light. 
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Monitor and Internal Light Source 


Internal light source 


Transparent Screen 


Any design on a computer monitor is seen with an internal light 
source. 
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Pixels and Text on a CRT Computer Monitor 
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PC LCD (Liquid Crystal Display) Monitor 


Pixels on a LCD Computer Monitor and the text displayed in it. 
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Aliased letter and anti-aliased letter 


D AD 


D D 


Aliased letter (on the left) and anti-aliased letter (on the right). 
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Verdana is a sans 
serif font designed 
by Matthew Carter. 
It was designed 
for screen usage. 
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Georgia is a Serif 
font designed by 
Matthew Carter. It 
was also designed 
for screen usage. 
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Georgia x-height Centaur x-height 


Verdana x-height Gill x-height 


Compare design features of fonts 
designed for the screen, all the fonts 
are presented in the same point size. 


D’source 


Digital Learning Environment for Design - www.dsource.in 


Design Course 


Digital Typography - 2 
Understanding Type as Bits 

by 

Prof. Girish Dalvi 

IDC, IIT Bombay 


Source: 
http://www.dsource.in/course/digital-typography-2/ 
presentation-slide-show 


1. Introduction 

2. Light Sources 

3. Screen Types 

4. Fonts for the Screen 

5. Presentation - Slide Show 
6. References 

7. Contact Details 


26 


| Illiterate Illusion 
1 Illiterate Illusion 


Compare design features of fonts 
designed for the screen, both fonts 
are presented in the same point size. 
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+ Useful resource e-links related to ‘Graphic Design’ in India 
- includes Communication Design, Publication Design and Packaging Design 


* International resource related to ‘Graphic Design’ 


* Visual Communication Design at IDC IIT Bombay 
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Contact Details: 


This documentation was done by Girish Dalvi, Ph.D. 
Student at IDC, IIT Bombay. 


You can get in touch with him at 
girish.dalvi[at]gmail.com 


You could write to the following address regarding 
suggestions and clarifications: 


Helpdesk Details: 
Co-ordinator 

Project e-kalpa 
Industrial Design Centre 
IIT Bombay 

Powai 

Mumbai 400076 

India 


Phone: 091-22-25767820/ 7801/ 7802 
Fax: 091-22-25767803 
Email: contact[at]dsource.in / dsource.in[at]gmail.com 


